<template>
  <div class="homemiddlebox">
    <div class="gaodemap">
      <Gaodemap :mapmarkerlist="mapmarkerlist"></Gaodemap>
    </div>
    <div class="rightbox">
      <div class="topbox rightlitt">
        <div class="title">同环比分析</div>
        <div class="huanbi" ref="huanbi"></div>
      </div>
      <div class="rightlitt">
        <div class="fuhequshi">
          <div class="title">负荷趋势</div>
          <div>
            <el-radio-group v-model="radio4" size="mini" @change="getqushi">
              <el-radio-button label="日"></el-radio-button>
              <el-radio-button label="月"></el-radio-button>
            </el-radio-group>
          </div>
        </div>
        <div class="huanbi" ref="fuhequshi"></div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getuseraddressapi,
  gettonghuanbiapi,
  getyongdianqushiapi
} from '@/api/energy-consumption/GeneralSituation/HomePage'
import * as echarts from 'echarts'
import Gaodemap from '../HomePage/components/GaodeMap.vue'
export default {
  name: 'CallPoliceMiddle',
  components: { Gaodemap },
  data() {
    return {
      radio4: '日',
      mapmarkerlist: []
    }
  },

  async mounted() {
    const {
      data: { list }
    } = await getuseraddressapi()
    this.mapmarkerlist = list
    this.gettonghuanbi()
    this.getqushi()
  },

  methods: {
    async gettonghuanbi() {
      var chartDom = this.$refs.huanbi
      var myChart = echarts.init(chartDom)
      var option
      const colorlist = ['#16ccc0', '#1a90fe']
      const {
        data: { list }
      } = await gettonghuanbiapi()
      const xAxisData = [
        '01',
        '02',
        '03',
        '04',
        '05',
        '06',
        '07',
        '08',
        '09',
        '10',
        '11',
        '12'
      ]
      const series = list.map((yearData, index) => {
        const monthlyData = new Array(12).fill(null)
        yearData.datalist.forEach((item) => {
          const month = item.timeReading.split('-')[1]
          const monthIndex = parseInt(month, 10) - 1
          monthlyData[monthIndex] = parseFloat(item.valueReading)
        })
        return {
          name: yearData.name,
          data: monthlyData,
          type: 'bar',
          itemStyle: {
            color: colorlist[index]
          }
        }
      })
      option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        legend: { right: '0' },
        grid: {
          left: '3%',
          right: '1%',
          bottom: '1%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: xAxisData,
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '电量(kWh)',
            axisLine: {
              show: true
            }
          }
        ],
        series: series
      }
      myChart.clear()
      option && myChart.setOption(option)
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    },
    async getqushi() {
      var chartDom = this.$refs.fuhequshi
      var myChart = echarts.init(chartDom)
      var option
      const colorlist = ['#2796fe', '#f3da59']
      const {
        data: { list }
      } = await getyongdianqushiapi({
        dateType: this.radio4 == '日' ? '1' : '2'
      })
      const timePoints = list[0]?.datalist.map((ele) => ele.timeReading)
      const series = list.map((ele, index) => {
        return {
          name: ele.name,
          type: 'line',
          smooth: true,
          showSymbol: false,
          symbol: 'none',
          symbolSize: 6,
          lineStyle: {
            color: colorlist[index] // 设置线条颜色为红色
          },
          itemStyle: {
            color: colorlist[index] // 设置图例颜色为红色
          },
          data: ele.datalist.map((ele) => ele.valueReading)
        }
      })
      option = {
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '3%',
          right: '1%',
          bottom: '1%',
          containLabel: true
        },
        legend: {
          right: '0',
          itemStyle: {
            color: 'inherit'
          }
        },
        xAxis: [
          {
            type: 'category',
            data: timePoints,
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '负荷(kW)',
            axisLine: {
              show: true
            }
          }
        ],
        series: series
      }
      myChart.clear()
      option && myChart.setOption(option)
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    }
  }
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.homemiddlebox {
  height: 100%;
  display: flex;
  .gaodemap {
    width: 66.45%;
    background-color: #fff;
    margin-right: 10px;
  }
  .rightbox {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .rightlitt {
      flex: 1;
      background-color: #fff;
      padding: 15px;
      .fuhequshi {
        display: flex;
        justify-content: space-between;
      }
      .huanbi {
        height: 90%;
      }
      .title {
        font-weight: bold;
        font-size: 16px;
        color: #323232;
      }
    }
    .topbox {
      margin-bottom: 10px;
    }
  }
}
</style>
